<script setup lang="ts"></script>

<template>
  <div class="project-item" @click="$emit('toDetail')">
    <div class="project-img">
      <img
        src="https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0"
        alt="项目图片"
      />
    </div>
    <div class="project-info">
      <div class="project-info-item">
        <span class="label">项目名称：</span>
        <span class="content">安徽百诚慧通公司项目管理项目</span>
      </div>
      <div class="project-info-item">
        <span class="label">开始日期：</span>
        <span class="content">2025-02-13 15:22:48</span>
      </div>
      <div class="project-info-item">
        <span class="label">项目经理：</span>
        <span class="content">陶荣徽</span>
      </div>
      <div class="project-info-item">
        <span class="label">产品经理：</span>
        <span class="content">陶荣徽</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.project-item {
  box-sizing: border-box;
  width: calc(100% / 5 - 16px);
  height: 280px;
  padding: 10px;
  margin-bottom: 20px;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 0 10px 6px rgb(0 0 0 / 10%);

  &:not(:nth-child(5n)) {
    margin-right: 20px;
  }
}

.project-img {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;

  img {
    width: 100%;
    height: 100%;
  }
}

.project-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  height: 60px;

  .project-info-item {
    width: 50%;

    .label {
      display: inline-block;
      width: 50%;
    }

    .content {
      display: inline-block;
      width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
